<template>
    <div class="department">
        <!-- 动态表单 -->
        <dynamic-form :formDataList='formDataList' @getFormData='getFormData'></dynamic-form>

        <!-- 按钮操作 -->
        <custom-setbtn>
            <template #l_btn>
                <div class="l_btn">
                    <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="openDialog('创建')">
                        创建部门</el-button>
                </div>
            </template>
            <template #r_btn>
                <div class="r_btn">
                    <!-- 列配置表格 -->
                    <pop-checkbox :disposeGroup='disposeGroup' @handleChangeDiposeGroup='handleChangeDiposeGroup'></pop-checkbox>
                </div>
            </template>
        </custom-setbtn>

        <el-dialog :visible.sync="departmentVisible" width="600px" @close='handleClose'>
            <template #title>
                <span>{{title}}部门</span>
            </template>
            <div class='dialog__body'>
                <el-form :model="createDepartmentForm" :rules="createDepartmentRules" ref="createDepartmentForm"
                    label-width="100px" size="mini">
                    <el-form-item label="部门编码" prop="code">
                        <el-input v-model="createDepartmentForm.code" :maxlength="120"></el-input>
                    </el-form-item>
                    <el-form-item label="部门名称" prop="name">
                        <el-input v-model="createDepartmentForm.name" :maxlength="120"></el-input>
                    </el-form-item>
                    <el-form-item label="用户" prop="ids">
                        <el-select v-model="createDepartmentForm.ids" multiple filterable remote placeholder="请选择"
                            :remote-method="remoteMethod" :loading="yhLoading" @visible-change='visibleChange'
                            @change='userChange'>
                            <el-option v-for="item in yhOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="departmentVisible = false">取 消</el-button>
                <el-button type="primary" size="mini" @click="handleDepList">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 表格 -->
        <table-list :tableGroup='tableGroup' @openDialog='openDialog'
            :searchForm='formDataList.searchForm' ref='tableList' @delDep='delDep'>
        </table-list>
    </div>
</template>

<script>
    import {
        userListCopy,
        depHandle
    } from '@/api/userController'
    import tableList from './tableList.vue'
    import dynamicForm from '@/components/dynamicForm'
    import commonDialog from '../components/dialog.vue'
    import {
        productColumns
    } from '@/api/customFieldController'
    export default {
        data() {
            return {
                formDataList: {
                    formGroup: [{
                            label: 'code',
                            name: '部门编码',
                            prop: '',
                            placeholder: '请输入部门编码',
                            key: 'srk'
                        },
                        {
                            label: 'name',
                            name: '部门名称',
                            prop: '',
                            placeholder: '请输入部门名称',
                            key: 'srk'
                        },
                    ],
                    searchForm: {
                        code: '',
                        name: '',
                        page: 1,
                        limit: 10
                    },
                    reset: true,
                },
                disposeGroup: [],
                tableGroup: [],
                createDepartmentForm: {
                    code: '',
                    name: '',
                    ids: [],
                },
                createDepartmentRules: {
                    code: [{
                        required: true,
                        message: '部门编码不能为空!',
                        trigger: 'blur'
                    }],
                    name: [{
                        required: true,
                        message: '部门名称不能为空!',
                        trigger: 'blur'
                    }],
                },
                departmentVisible: false,
                yhLoading: false,
                yhOptions: [],
                title: '创建',
            }
        },
        components: {
            dynamicForm,
            tableList,
            commonDialog
        },
        mounted() {
            this.getProductColumns({
                type: 'dep'
            }).then(()=>{
                this.$refs.tableList.getDepList(this.formDataList.searchForm)
            })
        },
        methods: {
            getProductColumns: async function(data){
                const res = await productColumns(data)
                if (res.code == 200) {
                    this.disposeGroup = []
                    this.tableGroup = []
                    res.data.map((item, i) => {
                        const key = {
                            index:'80',
                            code:'80',
                            name:'80',
                            depUsers:'100',
                            createTime:'145',
                            createName:'70',
                            updateTime:'145'
                        }
                        let width = key[item.name] ?? '180'
                        if (item.state) {
                            this.tableGroup.push({
                                label: item.name,
                                name: item.chineseName,
                                width
                            })
                        }
                        this.disposeGroup.push({
                            label: item.name,
                            name: item.chineseName,
                            state: item.state
                        })
                    })
                }
            },
            //监视复选框值变化
            handleChangeDiposeGroup(disposeGroup) {
                let configureList = []
                configureList = disposeGroup.map(i => {
                    return {
                        name: i.label,
                        chineseName: i.name,
                        state: i.state
                    }
                })
                this.getProductColumns({
                    type: 'dep',
                    configureList
                }).then(()=>{
                    this.$refs.tableList.updateTable()
                })
            },
            //用户下拉
            getUserList(data) {
                userListCopy(data).then(res => {
                    this.yhLoading = false
                    if (res.code == 200) {
                        this.yhOptions = res.data.map(item => {
                            return {
                                value: item.id,
                                label: item.name
                            }
                        })
                    }
                })
            },
            //创建--编辑部门
            handleDepList() {
                this.$refs.createDepartmentForm.validate((valid) => {
                    if (valid) {
                        let params = {
                            ...this.createDepartmentForm
                        }
                        let ids = ''
                        params.ids && params.ids.forEach(i => {
                            ids += i + ','
                        })
                        if (ids.length > 0) ids = ids.substr(0, ids.length - 1)
                        params.ids = ids
                        this.getDepHandle(params,this.title)
                    } else {
                        return false;
                    }
                })
            },
            //删除
            delDep(id) {
                this.getDepHandle({
                    id,
                    delFlag: -1
                },'删除')
            },
            //部门操作
            getDepHandle(data,tipName) {
                depHandle(data,tipName).then(res => {
                    if (res.code == 200) {
                        this.$refs.tableList.getDepList(this.formDataList.searchForm,tipName)
                        this.departmentVisible = false
                    }
                })
            },
            //点击查询获取表单数据
            getFormData(val) {
                val.page = 1
                this.$refs.tableList.getDepList(val)
            },
            //下拉框打开时
            visibleChange(flag) {
                if (flag) this.remoteMethod('')
            },
            userChange(val) {
                this.createDepartmentForm.ids = val
            },
            //创建部门--用户框
            remoteMethod(query) {
                this.yhLoading = true;
                this.getUserList({
                    name: query
                })
            },
            //打开dialog
            openDialog(title, row) {
                if (title == '编辑') {
                    let ids = row.ids.length ? row.ids.split(',') : []
                    this.createDepartmentForm.code = row.code
                    this.createDepartmentForm.name = row.name
                    this.createDepartmentForm.id = row.id
                    this.getUserList({
                        name: ''
                    },ids)
                    this.createDepartmentForm.ids = ids.map(Number)
                }
                this.title = title
                this.departmentVisible = true
            },
            //关闭
            handleClose(){
                this.$refs.createDepartmentForm.resetFields()
            },
        }
    }
</script>

<style lang="less" scoped>
    .department {
        overflow: auto;

        /deep/ .el-dialog__body{
            padding: 20px 50px 10px;
        }

        .dialog__body {
            padding: 20px 50px 20px;
            border: 1px solid #edeef3;
            background: #fbfbfb;
            max-height: 210px;
            overflow: auto;

            .el-select.el-select--mini {
                width: 100%;
            }
        }
    }
</style>